import React, { Component } from "react";
import styled from "styled-components";

/* 
    1.安装 npm i styled-components
    2.导入 import styled from 'styled-components'
    3.如果写样式的时候没有颜色和提示 可以安装 vscode 插件 vscode-styled-components
    4.
    const Title = styled.h1`
    width: 200px;
    height: 50px;
    background-color: red;

    5.Title 就是具有样式的组件,使用的时候直接用 Title 即可
`
*/

const Title = styled.h1`
  width: 200px;
  height: 50px;
  background-color: red;
  color: white;
`;

const Nav = styled.h1`
  width: 300px;
  height: 150px;
  background-color: green;
  color: white;
`;



export default class App extends Component {
  render() {
    return (
      <div>
        <Title>你好世界</Title>
        <Nav>工资每个月都会发一次,一次可以持续一个星期</Nav>
      </div>
    );
  }
}
